<script setup lang="ts">
import {ref, useTemplateRef} from "vue";
import myAxios from "../../plugins/MyAxios.ts";
import {showFailToast, showSuccessToast} from "vant";
import {useRouter} from "vue-router";

const onClickLeft = () => history.back();

const teamName = ref<string>();
const description = ref<string>('');
const maxNum = ref<number>();
const time = ref('');
const timeRequest = ref<Date>()
const showPicker = ref(false);
const pickerValue = ref([]);
const teamStatus = ref('0')
const teamPassword = ref('')
const onConfirm = (data: any) => {
  const timeList = data.selectedValues
  timeRequest.value = new Date(
      Date.UTC(parseInt(timeList[0], 10),
          parseInt(timeList[1], 10) - 1,
          parseInt(timeList[2], 10))
  )
  time.value = timeList.join('/');
  pickerValue.value = data.selectedValues;
  showPicker.value = false;
};

const isShowPicker = () => {
  showPicker.value = false
}

const router = useRouter();
const form = useTemplateRef('form');
const createTeam = async () => {
  try {
    const formRef = form.value as any;
    await formRef.validate();
    const result = await myAxios.get('/user/current');
    const userId = result.data.data.id
    const response = await myAxios.post('/team/create', {
      name: teamName.value,
      description: description.value,
      maxNum: maxNum.value,
      expireTime: timeRequest.value,
      userId: userId,
      status: teamStatus.value,
      password: teamPassword.value,
    })
    if (response.data.code === 200) {
      showSuccessToast("创建队伍成功！");
      isShowPicker()
      await router.push('/home/more')
    }
  } catch (e) {
    isShowPicker()
    showFailToast("创建队伍失败!")
    console.log(e)
  }
}

const checkTeamName = () => {
  return !(teamName.value === null || teamName.value === undefined || teamName.value.length > 20);
}

const checkTeamDescription = () => {
  return !(description.value === null || description.value === undefined || description.value.length > 512);
}

const checkMaxNum = () => {
  return !(maxNum.value === undefined || maxNum.value <= 1 || maxNum.value > 10);
}

const checkExpireTime = () => {
  return !(timeRequest.value === undefined || timeRequest.value < new Date());
}

const checkTeamPassword = () => {
  return !(teamPassword.value === undefined || teamPassword.value.length > 32);
}

</script>

<template>
  <van-nav-bar title="麦语伙伴" left-text="返回" left-arrow @click-left="onClickLeft"/>
  <van-form ref="form">
    <van-cell-group inset>
      <van-field
          v-model="teamName"
          name="队伍名称"
          label="队伍名称"
          placeholder="请输入队伍名称"
          :rules="[{ required: true, validator: checkTeamName, message: '请输入队伍名称' }]"
      />
      <van-field
          v-model="description"
          type="textarea"
          name="描述"
          label="描述"
          placeholder="用几句话描述一下你的队伍吧"
          :rules="[{ validator: checkTeamDescription, message: '队伍描述不能超过512个字' }]"
      />
      <van-field
          v-model="maxNum"
          name="队伍最大人数"
          label="人数上限"
          placeholder="请输入队伍最大人数(2 ~ 10)"
          :rules="[{ required: true, validator: checkMaxNum, message: '请合法输入队伍最大人数' }]"
      />
      <van-field
          v-model="time"
          is-link
          readonly
          name="datePicker"
          label="时间选择"
          placeholder="点击选择队伍过期时间"
          @click="showPicker = true"
          :rules="[{ required: true, validator: checkExpireTime, message: '请合法输入队伍的过期时间' }]"
      />
      <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-date-picker
            :model-value="pickerValue"
            @confirm="onConfirm"
            @cancel="isShowPicker"
        />
      </van-popup>
      <van-field name="radio" label="队伍类型">
        <template #input>
          <van-radio-group v-model="teamStatus" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">私密</van-radio>
            <van-radio name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
          v-show="teamStatus === '2'"
          v-model="teamPassword"
          name="队伍密码"
          label="队伍密码"
          placeholder="请输入队伍密码"
          :rules="[{ message: '请合法输入队伍密码，长度小于32', validator: checkTeamPassword }]"
      >
      </van-field>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" @click="createTeam">
        创建队伍
      </van-button>
    </div>
  </van-form>
</template>

<style scoped>

</style>